<template>
  <SlickList v-model="currentApps" axis="xy" class="laucher" @sort-end="sortend">
    <BullectBox
      @click.left.native="closeBullectfun"
      ref="buBox"
      :options="bullectOpts"
      :showBox="bulletShow"
      lockOffset="0%"
    ></BullectBox>
    <SlickItem
      v-for="(item, index) in currentApps"
      :key="item._id"
      :index="index"
      :item="item"
      @click.right.native="bullectfun($event, item)"
    >
      <LauchItem :app="item" />
    </SlickItem>
  </SlickList>
</template>

<script>
import LauchItem from "./LauchItem.vue"
import BullectBox from "../rcbBox/bullectBox.vue"
import { mapState, mapActions } from "vuex"
import { SlickList, SlickItem } from "vue-slicksort"
import { AppIdEnum } from "@/constant"

export default {
  components: {
    LauchItem,
    SlickList,
    SlickItem,
    BullectBox
  },
  data() {
    return {
      currentApps: [],
      bullectOpts: []
    }
  },
  props: {
    bulletShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(["desktopCollects"])
  },
  watch: {
    desktopCollects: {
      handler(arr) {
        // console.log('原始order', arr.map(item => item.webOrder))
        this.currentApps = [...arr]
      },
      immediate: true
    }
  },

  methods: {
    ...mapActions(["moveToDrawer", "delCollect", "authJudge", "syncApps"]),
    bullectfun(event, app) {
      // console.log(app)
      let compx = event.clientX
      let compy = event.clientY
      if (event.offsetX + 13 * 16 > document.body.clientWidth) {
        compx = event.clientX - 13 * 16
      }
      if (event.offsetY + 5 * 16 > document.body.clientHeight) {
        compy = event.clientY - 5 * 16
      }
      this.bullectOpts = [
        {
          id: 1,
          title: "放入抽屉",
          action: () => {
            this.moveToDrawer(app)
          }
        },
        {
          id: 2,
          title: "编辑",
          action: () => {
            this.authJudge().then(() => {
              this.$EventBus.$emit("openWindow", {
                appId: AppIdEnum.COLLECT_MODAL,
                data: {
                  data: { ...app }
                }
              })
            })
          }
        },
        {
          id: 3,
          title: "删除",
          action: () => {
            this.delCollect(app)
          }
        }
      ]
      this.$data.bulletShow = true
      this.$refs.buBox.$el.style.top = String(compy) + "px"
      this.$refs.buBox.$el.style.left = String(compx) + "px"
    },
    closeBullectfun() {
      this.$data.bulletShow = false
    },
    sortend({ oldIndex, newIndex }) {
      const clone = [...this.currentApps]
      const item = clone.splice(oldIndex, 1)
      clone.splice(newIndex, 0, item[0])
      this.syncApps(clone)
    }
  }
}
</script>

<style lang="less" scoped>
.laucher {
  overflow: auto;
  max-height: 100%;
  // margin: 0 auto;
  max-width: 80%;
  margin: auto;
  // margin: 0 auto;
  // margin-left: 150px;
  // margin-right: 150px;
  // margin-left: 150px;
  // padding-right: 150px;
  // flex-wrap: wrap;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));

  // justify-content: stretch;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
}
</style>
